import React from "react";
import { NavBar, Icon, Flex, Button, Radio } from "antd-mobile";
import { navigate } from "gatsby";
import checkData from '../../services/task/checkData.json'

class Check extends React.Component {
  state = {
    data: checkData,
    data2: [],
    results: checkData.results
  };
  onChange2 = (value) => {
    console.log('checkbox');
    this.setState({
      value2: value,
    });
  };

  setResult(i, v) {
    console.log(i)
    this.setState((prevState, props) => {
      console.log(prevState)
      prevState.results[i].resultDescription = v;
      console.log(prevState.results)
      return {
        results: prevState.results
      }
    })
  }
  render() {
    return (
      <div>
        <div className="fixd-header">
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={e => {
              navigate(this.props.location.state.url);
            }}
          >
            巡查任务
        </NavBar>
        </div>
        <div className="page-content pad10">
          <div className="check-info clearfix">
            <img src="../../images/task/perform.png" alt="" />
            <div>
              <p>
                执行人员:<span>小小</span>
              </p>
              <p>
                设备名称:<span>小小</span>
              </p>
              <p>
                设备ID:<span>小小</span>
              </p>
              <p>
                所属任务:<span>小小</span>
              </p>
            </div>
          </div>
          <h6>第一步</h6>
          {this.state.results.map((item, i) => (
            <div className="cheak-item" key={item.id}>
              <Flex justify="between" align="center">
                <div className="item-name"><span className="info">!</span>{item.checkItemName}</div>
                {/* <List>

                  <RadioItem key={'正常'} checked={item.resultDescription != '正常'} onChange={() => { console.log(item) }}>
                    正常
                    </RadioItem>

                </List> */}
                <div className="select">
                  <Button size="small" inline className={item.resultDescription === '正常' ? 'checknor' : ""} onClick={this.setResult.bind(this, i, "正常")}>
                    正常
                  </Button>
                  <Button size="small" inline className={item.resultDescription === '故障' ? 'checkfau' : ""} onClick={this.setResult.bind(this, i, "故障")}>
                    故障
                  </Button>
                </div>
                <Button size="small" inline>
                  描述
                </Button>
              </Flex>
            </div>
          ))}

          <style jsx="true">{`
          img {
            float: left;
          }
          .check-info {
            border-bottom: 1px solid #eee;
          }
          .check-info div {
            float: left;
            padding-left: 1rem;
            color: #da3932;
          }
          .check-info div p {
            margin: 0;
            line-height: 2rem;
          }
          .check-info span {
            font-size: 1.2rem;
            color: #888;
          }
          h6 {
            font-size: 1.4rem;
            color: #000;
          }
          .cheak-item .am-button {
            height: 25px;
            line-height: 25px;
          }
          .item-name {
            width: 7rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height:25px;
          }
          .item-name .info{
            color: #fe5741;
            border-radius: 50%;
            border: 1px solid #fe5741;
            width: 1.2rem;
            height: 1.2rem;
            line-height: 1;
            text-align: center;
            display: inline-block;
            font-size: 1rem;
            margin-right: 0.5rem;
          }
          .am-tag {
            font-size: 1.1rem;
            background: #ccc;
            color: #fff;
            border-radius: 4px 0 0 4px;
          }
          .am-tag:last-child {
            border-radius: 0 4px 4px 0;
          }
          .select .am-button.checknor {
            background-color: green;
          }
          .select .am-button.checkfau {
            background-color: #da3932;
          }
          .select .am-button {
            background-color: #dddddd;
            color:#fff;
          }
          .select .am-button::before {
            border:0px!important;
          }
        `}</style>
        </div>
      </div>
    );
  }
}

export default Check;
